fluent-data-grid {
    --col-gap: 1rem;
}

::deep .empty-content-row,
::deep .loading-content-row {
    width: 100%;
    height: 100% !important ;
    display: flex;
    justify-content: center;
    align-items: center;
}

::deep .empty-content-cell, 
::deep .loading-content-cell {

    font-weight: 600;
}

.col-options {
    position: absolute;
    top: 2.2rem;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-layer-3);
    border-radius: 0.3rem;
    box-shadow: 0 3px 8px 1px var(--neutral-layer-4);
    padding: 1rem;
    z-index: 1;
}

[dir=rtl] .col-options {
    left: unset;
}

.col-justify-end .col-options, .col-justify-right .col-options {
    left: unset;
    right: 0.2rem;
}

[dir=rtl] .col-justify-end .col-options, [dir=rtl] .col-justify-right .col-options {
    right: unset;
    left: 0.2rem;
}

::deep > fluent-data-grid-row > fluent-data-grid-cell.grid-cell-placeholder:after {
    content: '\2026'; /*horizontal ellipsis*/
    opacity: 0.75;
}



::deep .col-width-draghandle {
    height: auto;
    width: calc(var(--design-unit) * 1px + 2px);
    right: calc(var(--col-gap)/2 - 0.5rem);
    border-top: none;
    border-left: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
    cursor: col-resize;
}

.col-width-draghandle:hover, .col-width-draghandle:active {
    background: var(--neutral-stroke-divider-rest);
}
